<template>
	<div class="componenManagement">
		<!-- 标题 -->
		<h2>大纲树</h2>
		<el-alert title="底部导航组件为固定页面底部，无需拖拽调整位置" type="success">
		</el-alert>
		<el-tree :data="$pageSchema" :props="treeProps" node-key="id" style="margin-top: 5px;" icon-class=""
			default-expand-all draggable @node-click="handleNodeClick" :allow-drop="allowDrop">
			<template #default="{ node, data }">
				<div class="custom-tree-node">
					<span>
						<el-icon v-if="data.icon">
							<component :is="data.icon" />
						</el-icon>
						<i class="iconfont" :class="data.customIcon" v-else-if="data.customIcon" />
						<!-- <van-icon :name="element.vanIcon" v-else /> -->
						<span>{{ node.label }}</span>
					</span>
					<el-link type="primary" icon="el-icon-delete" @click="() => remove(node, data)"></el-link>
				</div>
			</template>

		</el-tree>
	</div>
</template>

<script>
	import {
		mapState
	}
	from 'vuex'
	import {
		activeComponent,
		deleteComponent
	} from '@/utils/componentEvent.js'
	export default {
		name: 'componenmanagement',
		// props: ['datas'],
		data() {
			return {
				// data: this.datas,
				dragOptions: {
					animation: 200,
					// class是 delDragitem 禁止拖拽
					filter: '.delDragitem',
				},
				treeProps: {
					label: 'text',
					children: 'pageComponents'
				}
			}
		},
		computed: {
			...mapState(['$pageSchema'])
		},
		methods: {
			/* 删除组件 */
			onConfirms(res) {
				this.data.splice(res, 1)
				// this.$emit('componenmanagement', this.data)
			},
			handleNodeClick(res) {
				activeComponent(res, 0)

			},
			allowDrop(draggingNode, dropNode, type) {
				// return true
				return (type === "inner" && dropNode.data.type === "container") || type != "inner" // 容器可以拖拽到里面
			},
			remove(node, data) {
				console.info(data.id)
				const parent = node.parent;
				const children = parent.data.pageComponents || parent.data;
				const index = children.findIndex(d => d.id === data.id);
				children.splice(index, 1);
			},
		},
		watch: {

		},
	}
</script>

<style scoped lang="less">
	/* 组件管理 */
	.componenManagement {
		width: 100%;


		/* 标题 */
		h2 {
			padding: 24px 16px 24px 0;
			margin-bottom: 15px;
			border-bottom: 1px solid #f2f4f6;
			font-size: 18px;
			font-weight: 600;
			color: #323233;
		}



		/* 选项 */
		.custom-tree-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 12px;
		}

		.delDragitem {
			background-color: rgba(10, 42, 97, 0.2);
			cursor: no-drop;
		}
	}
</style>